<template>
  <div class="dv-border-box-10" ref="borderBox10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <polygon :fill="backgroundColor" :points="`
        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
        4, ${height} 0, ${height - 4} 0, 4
      `"/>
    </svg>

    <svg
        width="150px"
        height="150px"
        :key="item"
        v-for="item in border"
        :class="`${item} dv-border-svg-container`"
    >
      <polygon
          :fill="mergedColor[1]"
          points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
      />
    </svg>

    <div class="border-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { cloneDeep, debounce, mergeDeep } from "../../../../utils/utils";
import { onMounted, ref, watch,defineComponent } from "vue";

export default defineComponent({
  name: "DvBorderBox10",
  props: {
    color: {
      type: Array,
      default: () => ([])
    },
    backgroundColor: {
      type: String,
      default: "transparent"
    }
  },
  setup(props) {
    const borderBox10 = ref(null);
    const defaultColor = ref(["#1d48c4", "#d3e1f8"]);
    const mergedColor = ref([]);
    const width = ref(300);
    const height = ref(300);
    const border = ref(["left-top", "right-top", "left-bottom", "right-bottom"]);

    const mergeColor = () => {
      mergedColor.value = mergeDeep(cloneDeep(defaultColor.value), props.color || []);
    };
    watch(() => props.color, s => {
      mergeColor();
    });
    onMounted(() => {
      const ro = new ResizeObserver(entries => {
        handleResize(entries);
      });
      ro.observe(borderBox10.value);
      mergeColor();
    });
    const handleResize = debounce((entries) => {
      width.value = entries[0].contentRect.width;
      height.value = entries[0].contentRect.height;
    }, 100);
    return { width, height, borderBox10, mergedColor, mergeColor, handleResize, defaultColor, border };
  },
});
</script>

<style scoped>
.dv-border-box-10 {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.dv-border-box-10 .dv-border-svg-container {
  position: absolute;
  display: block;
}

.dv-border-box-10 .right-top {
  right: 0px;
  transform: rotateY(180deg);
}

.dv-border-box-10 .left-bottom {
  bottom: 0px;
  transform: rotateX(180deg);
}

.dv-border-box-10 .right-bottom {
  right: 0px;
  bottom: 0px;
  transform: rotateX(180deg) rotateY(180deg);
}

.dv-border-box-10 .border-box-content {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
